<template>
  <canvas class="data-v-loading1" width="150" height="34"></canvas>
</template>

<script>
import { modifyOpacity } from '../color';
import Circle from "./Circle";
export default {
  name: "data-v-loading1",
  props: ["color"],
  mounted() {
    const canvas = this.$el;
    const context = canvas.getContext("2d");
    const self = this;
    // let centerX = canvas.width / 2;
    let centerY = canvas.height / 2;

    let gradnent = context.createLinearGradient(22, 0, 20, 22);
    gradnent.addColorStop(0, this.color);
    gradnent.addColorStop(1, "transparent");

    let circle1 = new Circle(10, gradnent);
    let circle2 = new Circle(15, modifyOpacity(this.color, 0.8));
    let circle3 = new Circle(15, modifyOpacity(this.color, 0.8));

    // 设置圆圈的初始位置
    circle1.x = 20;
    circle1.y = centerY;
    circle2.x = 20;
    circle2.y = centerY;
    circle3.x = 20;
    circle3.y = centerY;

    circle1.startAngle = -90;
    circle1.endAngle = 150;

    circle2.startAngle = -30;
    circle2.endAngle = 30;

    circle3.startAngle = 150;
    circle3.endAngle = 210;

    let offset = 105;
    function drawFrame() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      // 让circle1旋转
      circle1.rotation -= 1;
      if (circle1.rotation < -360) {
        circle1.rotation = 0;
      }

      circle1.draw(context);
      circle2.draw(context);
      circle3.draw(context);

      offset += 0.4;
      if (offset > 120) {
        offset = 105;
      }
      drawText(context, "Loading...");
      context.clearRect(offset, 0, canvas.width, canvas.height);
      requestAnimationFrame(drawFrame);
    }

    function drawText(ctx, text) {
      ctx.save();
      ctx.fillStyle = self.color;
      ctx.font = "14px Aricl";
      ctx.fillText(text, 50, centerY + 5);
      ctx.restore();
    }
    drawFrame();
  }
};
</script>

<style lang="less">
.data-v-loading1 {
 
}
</style>
